<template>
  <div ref="chartBox" class="chart"></div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Column } from "@antv/g2plot";
/** @api */
/** @数据 */
let columnData: Column | undefined = undefined;
const chartBox = ref<HTMLDivElement>()
  interface Props {
  data: any[];
  unit: string;
}
const props = withDefaults(defineProps<Props>(), {});
/** @生命周期 */
onMounted(() => {
  initChart()
})
/** @方法 */
/** 初始化图 */
const initChart = () => {
  let flag = false;
  props.data?.forEach((ele: any)=>{
    if(ele.y > 800){
      flag = true;
    }
  })
  let dataList = JSON.parse(JSON.stringify(props.data));
  if(flag){
    dataList = dataList?.map((ele: any) =>{ ele.y = ele.y/100; return ele;})
  }
  columnData = new Column(chartBox.value as HTMLDivElement, {
    data: dataList || [],
    padding: 'auto',
    xField: 'x',
    yField: 'y',
    seriesField: 'x',
    renderer: 'canvas', // 强制使用Canvas渲染（默认值，性能优于SVG）
    limitInPlot: false,  // 启用绘图区数据裁剪（避免超量渲染）
    color: ['#0086FF', '#5603BD', '#03BF6A', '#FE7200', '#A000C3'],
    columnWidthRatio: 0.2,
    xAxis: {
      label: {
        offset: 15
      },
      tickLine: {
        length: 0
      }
    },
    yAxis: {
      min: 0,
      //max: 500,
      tickInterval: 20,
      line: {
        style: {
          stroke: '#fff'
        }
      },
      grid: {
        //visible: false
      },
      label: {
        formatter: (v: any) =>{ 
          return `${v}`+(flag ? '00' : '');
        }
      }
    },
    legend: {
      visible: false
    },
    tooltip: {
      formatter: (datum: any) => {
        return {
          name: datum.x,
          value: (flag ? datum.y * 100 : datum.y)+(props.unit || 0),
        };
      },
    },
    // theme: {
    //   components: {
    //     canvas: {
    //       background: 'transparent', // 关键配置 
    //     },
    //   },
    // },
    theme: {
      //defaultColor: '#5B8FF9', // 主色重置 
      // components: {
      //   axis: { grid: { line: { style: { stroke: '#DDD' } } } }, // 网格线颜色 
      //   view: { background: { fill: 'transparent' } },           // 透明背景 
      // },
      // styleSheet:{
      //   backgroundColor: 'rgb(52 52 52)',
      //   barFillOpacity: 0.8
      // }
    }
  })
  columnData?.render();
}
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>